<template>
  <div class="wipedd">
    <!-- 展示从 udp 获取到的时间 -->
    <div class="udp-box">
      <div class="showTime" v-if="isUdpData">
        <span class="time_box">{{ h + ":" + m + ":" + s + ":" + rate }}</span>
        <!-- <el-checkbox v-model="checked" @change="selectTime(checked)"></el-checkbox> -->
        <el-checkbox v-model="checked"></el-checkbox>
      </div>
      <!-- 展示登录成功后的 IP -->
      <div class="showIp">
        <div class="el-icon-error close" @click="close"></div>
        <span>{{ ipAddr }}</span>
      </div>
    </div>
    <!-- 选择时间模块 -->
    <div class="animate__animated animate__backInLeft">
      <el-time-picker
        :editable="false"
        v-model="values"
        @change="changeTime"
        placeholder="播放任意时间点"
      >
      </el-time-picker>
      <!-- <el-card class="box-card">
    <div class="text item">
    {{clipsdata}}
    </div>
</el-card> -->
      <!-- <div class="animate__animated animate__backInLeft">
<el-select v-model="value" @change="changeLocationValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      >
    </el-option>
  </el-select>
        <el-button @click="backward" type="info">向后视频切换</el-button>
        <el-button @click="forward" type="info">向前视频切换</el-button>
        </div> -->
      <div>
        <el-button @click="prepareButton" type="primary" plain>准备</el-button>
        <el-button @click="recordingButton" type="danger" plain>录制</el-button>
        <el-button @click="playButton" type="success" plain>播放</el-button>
        <el-button @click="pauseButton" type="info" plain>暂停</el-button>
      </div>
      <!-- 视频列表 -->
      <el-card class="box-card" v-show="mark">
        <div slot="header" class="clearfix">
          <span class="span-index">视频列表</span>
          <el-button style="float: right" type="text">{{
            this.videosList.length
          }}</el-button>
        </div>
        <div
          v-for="(item, index) in this.videosList"
          :key="index"
          class="text item"
        >
          {{ item.videosTime + "----------" + item.lastTime }}
        </div>
      </el-card>
      <!-- <div class="bb"></div> -->
    </div>
  </div>
</template>
<script>
import Bus from "./eventBus";
import { request } from "@/utils/request.js";
export default {
  name: "videoplayerlist",
  data() {
    return {
      values: new Date(2021, 6, 23, 0, 0),
      getTimes: new Date().getTime().toString(),
      //存放时间码
      timeCode: "",
      //存放设备响应的数据
      responseData: [],
      value: "",
      time: "",
      // 该数组存放视频的起始时间，结束时间，视频的 id
      backendData: [],
      //存放用户输入或选择的时间
      inputTime: "",
      //存放视频的id
      id: "",
      //存放视频列表数据
      videosList: [],
      mark: "",
      ipAddr: "",
      flag: true,
      hours: "",
      minutes: "",
      seconds: "",
      //获取本机地址
      ip: location.hostname,
      //获取 udp 传过来的 时
      h: "",
      //获取 udp 传过来的 分
      m: "",
      //获取 udp 传过来的 秒
      s: "",
      //获取 udp 服务器传过来的帧率
      rate: "",
      //存放定时器的变量
      timer: null,
      //复选框的勾选状态
      checked: "",
      //存储 udp 服务器传过来的时间的变量
      select_time: "",
      //选择时间的标志 值为 false 没有踢勾选择时间
      isSelectTime: false,
      //是否存在 UDP 数据
      isUdpData: null,
    };
  },

  created() {
    this.showIp();
    //获取后台返回的数据
    this.getAllData();
    //获取 UDP 传过来的数据
    this.udpHandle();
  },

  mounted() {
    // let dom = document.querySelector("#videosList");
    // console.log(dom);
    // 监听 Aside.vue 中的 qiehuan 事件
    Bus.$on("qiehuan", (data) => {
      this.mark = data;
    });
  },

  methods: {
    // 刚打开页面的时候获取设备返回的数据
    async getAllData() {
      let { data: result } = await request.get("/api/getData", {
        params: {
          instructions: "clips get",
        },
      });
      //console.log(result);
      //获取数据失败
      if (result.status != 200)
        return this.$message({ message: result.message, type: "warning" });
      //获取数据成功
      //console.log(result.data);
      this.responseData = [result.data];
      //console.log(this.responseData);
      //获取到数据后渲染视频列表
      // this.getVideosListData();
    },

    //将设备的ip地址显示在页面上
    showIp() {
      this.ipAddr = sessionStorage.getItem("equipmentIp");
    },
    // 定义获取视频列表数据的函数
    getVideosListData() {
      // 调用 getDatas 函数，获取存放视频 id、时间字符串的数组
      let data = this.setVideosIdAndTimeCode();
      // console.log(data);
      // 生明该数组的目的是用来存放排序后的视频字符串
      let time_arr = [];
      // let obj = {}
      data.forEach((item) => {
        // 该对象用来存放视频的 id 视频的起始时间，视频的结束时间
        let obj = {};
        // 将视频起始时间的字符串分割为一个数组
        let timeArr = item.videosTime.split(":");
        // // 将视频的起始时间转化为秒并存入 obj 对象中
        obj.seconds =
          timeArr[0] * 60 * 60 + timeArr[1] * 60 + parseInt(timeArr[2]);
        // 将视频的起始时间存入对象中
        obj.videosTime = item.videosTime;
        // 将视频的持续时间存入对象中
        obj.lastTime = item.lastTime;
        // 把该对象存入 time_arr 数组中
        time_arr.push(obj);
      });
      // 将视频的时间线按从小到大排序
      for (let i = 0; i < time_arr.length - 1; i++) {
        for (let j = 0; j < time_arr.length - i - 1; j++) {
          let temp = null;
          if (time_arr[j].seconds > time_arr[j + 1].seconds) {
            temp = time_arr[j];
            time_arr[j] = time_arr[j + 1];
            time_arr[j + 1] = temp;
          }
        }
      }
      this.videosList = time_arr;
    },

    //定义获取UDP数据的处理函数
    async udpHandle() {
      //创建 webSocket 实例
      const ws = new WebSocket(`ws://${location.hostname}:3100`);
      ws.onopen = function (e) {
        //console.log("服务器连接成功");
        //每隔一秒向服务器发送消息，以便后面每隔一秒收到消息
        setInterval(function () {
          ws.send("我要获取UDP数据,谢谢!");
        });
      };

      ws.onmessage = (e) => {
        let result = JSON.parse(e.data);
        this.isUdpData = result;
        if (result) {
          this.h = this.zeroFilling(result[0]);
          this.m = this.zeroFilling(result[1]);
          this.s = this.zeroFilling(result[2]);
          this.rate = this.zeroFilling(result[3]);
        }

        //console.log(result);
      };
    },

    //选择 udp 服务器传过来的时间
    // async selectTime(checked){
    //     // console.log(checked);
    //     // if(checked) {
    //     //     clearInterval(this.timer)
    //     //     console.log(`${this.h}:${this.m}:${this.s}`);
    //     //     let inputTime = parseInt(this.h) * 60 * 60 + parseInt(this.m) * 60 + parseInt(this.s)
    //     //     this.inputTime = `${this.h}:${this.m}:${this.s}`
    //     //     this.matchTime(inputTime)
    //     // }else {
    //     //     this.timer = setInterval(this.udpCallback)
    //     // }

    //     if(checked){
    //         //checked 值为 true 说明了做了踢勾操作
    //         //通过踢勾选择的时间 udp 服务器传过来的时间 转化成秒
    //         // let h = this.h
    //         // let m = this.m
    //         // let s = this.s
    //         //将勾选的时间转化为秒
    //         this.select_time = parseInt(this.h) * 60 * 60 + parseInt(this.m) * 60 + parseInt(this.s)
    //         //将 udp 服务器传过来的时间转换成时间码
    //         this.inputTime = `${this.h}:${this.m}:${this.s}`
    //         // console.log(this.inputTime);
    //         //踢勾选择时间其值设置为 true
    //         this.isSelectTime = true
    //     }

    // },

    //定义补零函数
    zeroFilling(time) {
      return (time = time < 10 ? "0" + time : time);
    },

    //定义控制播放功能的函数
    async controlPlay() {
      let { data: result } = await request.get("/api/play", {
        params: { play: "play" },
      });
      //播放失败
      if (result.status != 200)
        return this.$message({ message: result.message, type: "warning" });
      // 播放成功
      this.$message({ message: result.message, type: "success" });
    },

    // 播放按钮
    async playButton() {
      if (this.checked) {
        //将勾选的时间转化为秒
        this.select_time =
          parseInt(this.h) * 60 * 60 + parseInt(this.m) * 60 + parseInt(this.s);
        //将 udp 服务器传过来的数据拼接成时间字符串作为用户的输入时间
        this.inputTime = `${this.h}:${this.m}:${this.s}`;
        // console.log(this.select_time);
        // console.log(this.inputTime);
        //1.踢勾选择时间后点击播放按钮根据选择的时间打开对应的视频
        let timeCode = await this.matchTime(this.select_time);
        //console.log(timeCode);
        if (timeCode) {
          //2.播放该视频
          this.controlPlay();
          // setTimeout(this.controlPlay,10)
        }
      } else {
        //没有做选择时间的操作普通的播放视频
        this.controlPlay();
      }
    },

    //暂停
    async pauseButton() {
      //   let { data: result } = await axios.get(
      //     "http://" + this.ip + ":3000/api/stop",
      //     {
      //       params: {
      //         stop: "stop",
      //       },
      //     }
      //   );

      //   if (result == "success") {
      //     this.$message({
      //       message: "你好，设备已暂停播放",
      //       type: "success",
      //     });
      //   } else {
      //     this.$message.error(`服务器连接失败，请检查后台是否开启`);
      //   }

      let { data: result } = await request.get("/api/stop", {
        params: { pause: "stop" },
      });
      //暂停失败
      if (result.status != 200)
        return this.$message({ message: result.message, type: "warning" });
      //暂停成功
      this.$message({ message: result.message, type: "success" });
    },

    // 录制
    async recordingButton() {
      //   let { data: result } = await axios.get(
      //     "http://" + this.ip + ":3000/api/record",
      //     {
      //       params: {
      //         record: "record",
      //       },
      //     }
      //   );

      //   if (result) {
      //     this.$message({
      //       message: "你好，设备正在录制中",
      //       type: "success",
      //     });
      //   } else {
      //     that.$message.error(`服务器连接失败，请检查后台是否开启`);
      //   }
      let { data: result } = await request.get("/api/record", {
        params: {
          record: "record",
        },
      });
      //录制失败
      if (result.status != 200)
        return this.$message({ message: result.message, type: "warning" });
      //录制成功
      this.$message({ message: result.message, type: "success" });
    },

    //准备
    async prepareButton() {
      //   let { data: result } = await axios.get(
      //     "http://" + this.ip + ":3000/api/prepare",
      //     {
      //       params: {
      //         prepare: "preview:enable:true",
      //       },
      //     }
      //   );

      //   if (result == "success") {
      //     this.$message({
      //       message: "你好，设备返回原来时间成功",
      //       type: "success",
      //     });
      //   } else {
      //     this.$message.error(`服务器连接失败，请检查后台是否开启`);
      //   }
      let { data: result } = await request.get("/api/prepare", {
        params: { prepare: "preview:enable:true" },
      });
      //准备失败
      if (result.status != 200)
        return this.$message({ message: result.message, type: "warning" });
      //准备成功
      this.$message({ message: result.message, type: "success" });
    },

    // 用户选择的时间
    changeTime(val) {
      // this.arr2.length = 0;
      // if(this.checked){
      //     this.checked = false
      //     this.timer = setInterval(this.udpCallback)
      // }
      this.time = val;
      const times = this.time.toString();
      // this.getDatas();
      //获取用户选择的时间并将时分秒存入数组中
      let times_arr = times.substring(16, 24).split(":");
      // 将用户选择的时间转化为以秒为单位的时间
      let inputTime =
        parseInt(times_arr[0]) * 60 * 60 +
        parseInt(times_arr[1]) * 60 +
        parseInt(times_arr[2]);
      // 获取用户输入的 时 分 秒
      this.inputTime = times.substring(16, 24);
      this.matchTime(inputTime);
    },

    setVideosIdAndTimeCode() {
      //console.log(this.responseData);
      this.responseData.forEach((item) => {
        // 拿到后台返回的视频字符串去匹配 'mov'
        let data = item.match("mov");
        // 如果 data 存在说明匹配成功
        if (data) {
          // 获取匹配成功后的视频字符串
          let input = data.input;
          // 将该字符串分割为一个数组
          let videosArr = input.split("\r\n");
          videosArr.forEach((val) => {
            // console.log(val);
            // 该对象的作用是用来存放 视频的 id 起始时间和结束时间
            let obj = {};
            // 将每一项含有 " 的字符串替换为空
            val = val.replace(/"/, "");
            val = val.replace(/;/g, ":");
            // 匹配含有 Capture 的字符串如果匹配成功可以获得视频的起始时间、持续时间和 id
            if (val && /mov/.test(val)) {
              // 将匹配成功后的字符串(该字符串含有视频的起始时间、持续时间和 id )分割为一个数组
              let strArr = val.split(":");
              // 将 id 存入 obj 中
              obj.id = strArr[0];
              // 获得字符串 v 的索引
              let index = val.indexOf("v");
              // 根据该索引获得视频的起始时间字符串和结束时间字符串并存入到 obj 对象中
              obj.videosTime = val.slice(index + 2, index + 13);
              obj.lastTime = val.slice(index + 14, index + 25);
              // 把 obj 对象存入数组中
              this.backendData.push(obj);
            }
          });
        }
      });

      //console.log(this.backendData);

      return this.backendData;
    },

    // 匹配用户输入的时间
    async matchTime(inputTime) {
      //console.log(this.backendData);
      //获取用户输入的时间码和视频 id
      this.backendData.some((item) => {
        // 将视频的时间线(起始时间)分割为一个数组
        let videosTimeArr = item.videosTime.split(":");
        // 将视频的持续时间分割为一个数组
        let lastTimeArr = item.lastTime.split(":");
        // 将视频的时间线转化为秒
        let videosSeconds =
          parseInt(videosTimeArr[0]) * 60 * 60 +
          parseInt(videosTimeArr[1]) * 60 +
          parseInt(videosTimeArr[2]);
        // 将视频的持续时间转化为秒
        let lastSeconds =
          parseInt(lastTimeArr[0]) * 60 * 60 +
          parseInt(lastTimeArr[1]) * 60 +
          parseInt(lastTimeArr[2]);
        // 计算视频的结束时间
        let overTime = videosSeconds + lastSeconds;
        // console.log(videosSeconds,overTime);
        // 如果用户输入的时间在视频的起始时间和结束时间之间就选出对应的视频 id和时间码 方便后面发 axios 请求将 id，时间码 传给设备，设备根据 id和时间码 跳转到对应时间线的视频
        if (videosSeconds <= inputTime && inputTime <= overTime) {
          // console.log(item);
          //用户输入的时间在视频的起始时间和结束时间这个范围内
          if (videosSeconds == inputTime || inputTime == lastSeconds) {
            //用户输入的时间和视频的起始时间相等，或输入的时间和视频的持续时间相等，截取起始时间的帧率或持续时间的帧率和用户输入的时间拼接上作为时间码
            this.timeCode = this.inputTime + `:${videosTimeArr[3]}`;
          } else {
            //将时间码默认设置为 '00'
            this.timeCode = this.inputTime + ":00";
          }
          //用户选择时间码的视频 id
          this.id = item.id;
          // this.$message({
          //   message: `视频已切换到:${this.timeCode}`,
          //   type: "success",
          // });

          return true;
        } else {
          this.timeCode = "";
          this.id = "";
        }
      });

      if (this.timeCode === "") {
        //用户所选择的时间不在视频的起始时间和结束时间的范围
        this.$message({
          message: "你好，当前选择的时间线不存在",
          type: "warning",
        });
      } else {
        //选择的时间在视频的起始时间和结束时间之间发起请求
        // axios.get("http://" + this.ip + ":3000/api/changetime", {
        //   params: {
        //     id: this.id,
        //     timeCode: this.timeCode,
        //   },
        // });
        let { data: result } = await request.get("/api/selectTime", {
          params: {
            idAndTimeCode: {
              id: this.id,
              timeCode: this.timeCode,
            },
          },
        });
        if (result.status != 200)
          return this.$message({ message: result.message, type: "error" });
        this.$message({
          message: `视频已切换到:${this.timeCode}`,
          type: "success",
        });
      }

      this.values = new Date(2021, 6, 23, 0, 0);
      //console.log(this.timeCode);
      return this.timeCode;
    },

    close() {
      this.$router.push("/server");
      sessionStorage.removeItem("equipmentIp");
      this.flag = !this.flag;
      // 触发 Aside.vue 组件 中 toggleButton 事件
      Bus.$emit("toggleButton", this.flag);
    },
  },
};
</script>

<style lang="less" scoped>
.showTime span {
  color: #fff;
}

.el-checkbox__inner {
  margin-left: 10px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 400px !important;
}

.el-button--primary.is-plain[data-v-2a5915db] {
  width: 135px !important;
}

.el-button--info {
  font-size: 16px;
}

.el-button--success.is-plain {
  color: #909399 !important;
  font-size: 25px;
  width: 125px;
  height: 80px;
  background: #f4f4f5 !important;
  border: none !important;
}

.el-button--success.is-plain:focus,
.el-button--success.is-plain:hover {
  background: #67c23a !important;
  border-color: #67c23a !important;
  color: #fff !important;
}

.el-button--info.is-plain {
  color: #909399;
  font-size: 25px;
  width: 125px;
  height: 80px;
  background: #f4f4f5;
}

.el-button--danger.is-plain {
  color: #909399 !important;
  font-size: 25px;
  width: 125px;
  height: 80px;
  background: #f4f4f5 !important;
  border: none !important;
}

.el-button--danger.is-plain:focus,
.el-button--danger.is-plain:hover {
  background: #f56c6c !important;
  color: #fff !important;
}

.el-button--primary.is-plain {
  color: #909399 !important;
  font-size: 25px;
  width: 125px;
  height: 80px;
  background: #f4f4f5 !important;
  border: none !important;
}

.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  background: #409eff !important;
  border-color: #409eff !important;
  color: #fff !important;
}

.el-button + .el-button {
  margin-left: 3px;
}

.text {
  font-size: 14px;
}

.item {
  /* height: 400px; */
  line-height: 50px !important;
}

.el-main[data-v-940808a8] {
  line-height: 10px !important;
  /* text-align: left; */
}

.el-card__body {
  overflow: auto !important;
  height: 490px !important;
}

.clearfix {
  line-height: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
/* .span-index{
       line-height: 20px;
     } */

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 0px !important;
}

.span-index {
  line-height: 40px;
  /* text-align: left !important; */
}

.box-card {
  width: 480px;
  margin: 0 auto;
}

.el-time-panel {
  width: 402px;
  font-size: 18px;
}

.el-time-spinner__item {
  font-size: 25px;
}

.header {
  height: 37px;
  margin-bottom: 50px;
  /* background: #3c3c3c; */
}

.user {
  position: relative;
  top: -20px;
  width: 200px;
  height: 37px;
  line-height: 37px;
  color: #fff;
  font-size: 18px;
  border-radius: 10px;
  box-shadow: 1px 1px 10px #fff;
}

.el-icon-error:before {
  position: absolute;
  top: 0;
  right: 0;
}

.udp-box {
  display: flex;
  width: 100%;
  margin-bottom: 30px;
  line-height: 37px;

  .showTime {
    flex: 1;
    // text-align: center;
    .time_box {
      margin-left: 218px;
      margin-right: 10px;
    }
  }

  .showIp {
    position: relative;
    width: 200px;
    height: 37px;
    text-align: center;
    background: #fff;
    border-radius: 10px;

    .close {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>